<html>
	<head>
		<title>Registration Form</title>
		<style type="text/css">
		body{
			background: #E4FCD9;
			font-family: Arial, Helvetica, sans-serif;		
		}
		table{
			background-color: #F4F9C2;
			border-right: 1px solid #81AD79;
			
		}
		input[type="text"],input[type="email"],input[type="date"],input[type="password"],input[type="file"],textarea,select{
			width:200px;
			font-size: 20px;
			color:#280EEF;
			background: #D4F9B1;
			border:1px solid #280EEF;
			border-radius: 10px;
			padding-left: 10px;
			padding-right: 10px;
			margin-left: 10px;  
		}
		input[type="submit"]{
			width:200px;
			font-size: 20px;
			background-color: #8FC986;
			padding: 5px;
			margin-left: 10px;
			border-radius: 10px;
			border: 1px solid #81AD79;
		}
		input[type="submit"]:hover{
			background-color: #81AD79;
			cursor: pointer; 
		}
		table td{
			padding: 5px;
			font-size: 20px;
			border-left: 1px solid #81AD79;
			border-bottom: 1px solid #81AD79;
		}
		table th{
			padding: 5px;
			font-size: 20px;
			background: #D9E05E;
			border-top: 1px solid #81AD79;
			border-bottom: 1px solid #81AD79;
			border-left: 1px solid #81AD79;
		}
		</style>

 <script type="text/javascript">
  alert(document.register.uname.value);
  
  function showPass()
  {
    var pass = document.register.password.value;
    alert(pass)
  }
  
  function showConPass(obj)
  {
    //console.log(obj.name);
    alert(obj.name)
  }

  function male()
  {
    var val = document.getElementById('gMaleId');
    alert(val.value)
  }
  function female()
  {
    var val = document.getElementById('gFemaleId');
    alert(val.value)
  }
</script>


	</head>
	<body>
		<form name="register">
			<table cellpadding="0" cellspacing="0"   width="70%" border="0" align="center">
				<thead>
					<tr>
						<th colspan="2">PLease fill the details below</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td align="right">Name :</td>
						<td>
						<input name="uname" required placeholder="My name is" type="text" value="Rasmus Lerdorf" onCLick="alert(this.type)">
						</td>
            
					</tr>
					<tr>
						<td align="right">Email :</td>
						<td>
						<input name="email" autocomplete="off" onpaste="return false" required placeholder="My email is" onBlur="alert(this.value)" type="email">
						</td>
					</tr>
					<tr>
						<td align="right">Password :</td>
						<td>
						<input name="password" onBlur="showPass()" autocomplete="off" onpaste="return false" required placeholder="password" type="password">
						</td>
					</tr>
					<tr>
						<td align="right">Confirm Password :</td>
						<td>
						<input name="conPassword"  onBlur="showConPass(this)" autocomplete="off" onpaste="return false" required placeholder="Confirm Password" type="password">
						</td>
					</tr>
					<tr>
						<td align="right">Date of Birth :</td>
						<td>
						<input name="dob" type="date" onChange="alert(this.value)" placeholder="DD/MM/YYYY">
						</td>
					</tr>
					<tr>
						<td align="right">Gender :</td>
						<td>
						<input id="gMaleId" name="gender" onClick="male()" type="radio" value="0">
						Male
						<input id="gFemaleId" name="gender" onClick="female()" type="radio" value="1">
						Female </td>
					</tr>
					<tr>
						<td align="right">Address :</td>
						<td>						<textarea name="address" required placeholder="My address is"></textarea></td>
					</tr>
					<tr>
						<td align="right">Country :</td>
						<td>
						<select name="country">
							<option>-Select-</option>
							<option>India</option>
							<option>Pakistan</option>
						</select></td>
					</tr>
					<tr>
						<td align="right">Languages known :</td>
						<td>
						<select name="lang" multiple>
							<option>PHP</option>
							<option>C++</option>
							<option>Java</option>
							<option>C#</option>
							<option>C</option>
						</select></td>
					</tr>
					<tr>
						<td align="right">Hobbies :</td>
						<td>
						<input name="hobbies" type="checkbox" value="0">
						Cricket
						<input name="hobbies" type="checkbox" value="1">
						Hockey
						<input name="hobbies" type="checkbox" value="1">
						Badminton
						<input name="hobbies" type="checkbox" value="1">
						Chess </td>
					</tr>
					<tr>
						<td align="right">Upload avatar :</td>
						<td>
						<input name="avatar" required placeholder="Upload avatar" type="file">
						</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>
						<input name="submit" type="submit" value="I am done!" >
						</td>
					</tr>
				</tbody>
			</table>
		</form>

<script type="text/javascript">
//  alert(document.register.uname.value);
</script>

	</body>

</html>